<template>
	<view>
		<view class="head-nav page_header">
			<scroll-view scroll-x="true" style="white-space: nowrap;display: flex;" class="tabScroll" show-scrollbar=false>
				<view class="tabScroll-item" v-for="item in navData" :class="navIndex == item.status ? 'active' : ''"
					@click="checkIndex(item.status)">{{item.text}}</view>
			</scroll-view>
		</view>

		<block v-for="(item, index) in orderList" :key="index">
			<view class="content" v-show="item.status == navIndex">
				<view class="order">
					<view class="it1">
						<image :src="item.img"></image>
						<text style="margin-left: 20rpx;">{{item.username}}</text>
						<text
							style="margin-right: 20rpx;margin-left: auto;">{{item.status == 1 ? '待接单':(item.status==3?'待配送':(item.status==4?'配送中':(item.status==5?'已完成':(item.status==6?'已取消':'已确认'))))}}</text>
					</view>
					<view class="it2">
						<text>下单时间：{{item.delivery_day}}</text>
					</view>
					<view class="line"></view>
					<scroll-view scroll-x="true" style="display: flex;">
						<view class="it3" v-for="goods in item.data.cart" @click="toDetailPage">

							<image :src="goods.productImg"></image>
							<view class="product-Info">
								<text style="font-size: 24rpx;color: #1A1A1A;">{{goods.title}}</text>
								<view v-for="pic in goods.options">
									<text style="font-size: 20rpx;color: #666666;">规格：{{pic.option_title}}</text>
									<text style="font-size: 20rpx;color: #1A1A1A;"> ￥{{pic.price*pic.num}}</text>
								</view>
							</view>
						</view>
					</scroll-view>

					<view
						:style="{display:'flex', alignItems:'center',justifyContent:'space-between',padding:'20rpx 0 40rpx 0'}">
						<view class="item4">
							<text>共{{ num }}件</text>
							<text style="margin-left: 30rpx;">合计 ￥{{ item.price }}</text>
						</view>
						<button @click="toCancel(item.id)" type="default" v-if="item.status==2"
							:style="{borderRadius:'30rpx',fontSize:'24rpx'}">取消订单</button>
						<button @click="open(item)" type="default" v-if="isOver"
							:style="{borderRadius:'30rpx', backgroundColor:'#FEB140',fontSize:'24rpx',margin:'0 30rpx 0 0'}">
							{{item.status == 1 ? '接单':(item.status==3?'去配送':(item.status==4?'确认取货':(item.status==5?'已完成':(item.status==6?'去取消':'去配送'))))}}
						</button>
						<button @click="confirmBtn(item)" type="default" v-else
							:style="{borderRadius:'30rpx', backgroundColor:'#FEB140',fontSize:'24rpx',margin:'0 30rpx 0 0'}">
							确认完成
						</button>
					</view>

				</view>
			</view>
		</block>
		<!-- 全部可操作订单列表 -->
		<view class="content" v-if="navIndex == 0">
			<block v-for="(item, index) in orderList" :key="index">
				<view class="order">
					<view class="it1">
						<image :src="item.img"></image>
						<text style="margin-left: 20rpx;">{{item.username}}</text>
						<text
							style="margin-right: 20rpx;margin-left: auto;">{{item.status == 1 ? '待接单':(item.status==3?'待配送':(item.status==4?'配送中':(item.status==5?'已完成':(item.status==6?'已取消':'已确认'))))}}</text>
					</view>
					<view class="it2">
						<text>下单时间：{{item.delivery_day}}</text>
					</view>
					<view class="line"></view>
					<scroll-view scroll-x="true" style="display: flex;">
						<view class="it3" v-for="goods in item.data.cart" @click="toDetailPage">

							<image :src="goods.productImg"></image>
							<view class="product-Info">
								<text style="font-size: 24rpx;color: #1A1A1A;">{{goods.title}}</text>
								<view v-for="pic in goods.options">
									<text style="font-size: 20rpx;color: #666666;">规格：{{pic.option_title}}</text>
									<text style="font-size: 20rpx;color: #1A1A1A;"> ￥{{pic.price*pic.num}}</text>
								</view>
							</view>
						</view>
					</scroll-view>

					<view
						:style="{display:'flex', alignItems:'center',justifyContent:'space-between',padding:'20rpx 0 40rpx 0'}">
						<view class="item4">
							<text>共{{ num }}件</text>
							<text style="margin-left: 30rpx;">合计 ￥{{ item.price }}</text>
						</view>
						<button @click="toCancel(item.id)" type="default" v-if="item.status==2"
							:style="{borderRadius:'30rpx',fontSize:'24rpx',margin:'0 30rpx 0 0'}">取消订单</button>
						<button @click="open(item)" type="default" v-if="isOver" 
							:style="{borderRadius:'30rpx', backgroundColor:'#FEB140',fontSize:'24rpx',margin:'0 30rpx 0 0'}">
							{{item.status == 1 ? '接单':(item.status==2?'去配送':(item.status==4?'确认取货':(item.status==5?'已完成':(item.status==6?'去取消':'0'))))}}</button>
						
						<button @click="confirmBtn(item)" type="default" v-else
							:style="{borderRadius:'30rpx', backgroundColor:'#FEB140',fontSize:'24rpx',margin:'0 30rpx 0 0'}">
							确认完成
						</button>
					</view>
				</view>
			</block>
		</view>
		<!-- 取消订单列表 -->
		<view class="content" v-if="navIndex == 6">
			<block v-for="(item, index) in cancelList" :key="index">
				<view class="order">
					<view class="it1">
						<image :src="item.img"></image>
						<text style="margin-left: 20rpx;">{{item.username}}</text>
						<text
							style="margin-right: 20rpx;margin-left: auto;">{{item.status == 1 ? '待接单':(item.status==3?'待配送':(item.status==4?'配送中':(item.status==5?'已完成':(item.status==6?'已取消':'已确认'))))}}</text>
					</view>
					<view class="it2">
						<text>下单时间：{{item.delivery_day}}</text>
					</view>
					<view class="line"></view>
					<scroll-view scroll-x="true" style="display: flex;">
						<view class="it3" v-for="goods in item.data.cart" @click="toDetailPage">
		
							<image :src="goods.productImg"></image>
							<view class="product-Info">
								<text style="font-size: 24rpx;color: #1A1A1A;">{{goods.title}}</text>
								<view v-for="pic in goods.options">
									<text style="font-size: 20rpx;color: #666666;">规格：{{pic.option_title}}</text>
									<text style="font-size: 20rpx;color: #1A1A1A;"> ￥{{pic.price*pic.num}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
		
					<view
						:style="{display:'block', alignItems:'center',justifyContent:'space-between',padding:'20rpx 0 40rpx 0',textAlign: 'left'}">
						<view class="item4">
							<text>共{{ num }}件</text>
							<text style="margin-left: 30rpx;">合计 ￥{{ item.price }}</text>
						</view>
						
					</view>
				</view>
			</block>
		</view>
		<!-- 完成订单列表 -->
		<view class="content" v-if="navIndex == 5">
			<block v-for="(item, index) in doneList" :key="index">
				<view class="order">
					<view class="it1">
						<image :src="item.img"></image>
						<text style="margin-left: 20rpx;">{{item.username}}</text>
						<text
							style="margin-right: 20rpx;margin-left: auto;">{{item.status == 1 ? '待接单':(item.status==3?'待配送':(item.status==4?'配送中':(item.status==5?'已完成':(item.status==6?'已取消':'已确认'))))}}</text>
					</view>
					<view class="it2">
						<text>下单时间：{{item.delivery_day}}</text>
					</view>
					<view class="line"></view>
					<scroll-view scroll-x="true" style="display: flex;">
						<view class="it3" v-for="goods in item.data.cart" @click="toDetailPage">
		
							<image :src="goods.productImg"></image>
							<view class="product-Info">
								<text style="font-size: 24rpx;color: #1A1A1A;">{{goods.title}}</text>
								<view v-for="pic in goods.options">
									<text style="font-size: 20rpx;color: #666666;">规格：{{pic.option_title}}</text>
									<text style="font-size: 20rpx;color: #1A1A1A;"> ￥{{pic.price*pic.num}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
		
					<view
						:style="{display:'flex', alignItems:'center',justifyContent:'space-between',padding:'20rpx 0 40rpx 0'}">
						<view class="item4">
							<text>共{{ num }}件</text>
							<text style="margin-left: 30rpx;">合计 ￥{{ item.price }}</text>
						</view>
						<button type="default"
							:style="{borderRadius:'30rpx',fontSize:'24rpx',margin:'0 30rpx 0 0',display:'block'}">订单已完成</button>
					</view>
				</view>
			</block>
		</view>
		

		<uni-popup ref="popup" type="bottom">
			<view class="list">
				<view class="ps">选择配送方式</view>
				<scroll-view scroll-y="true" class="list" show-scrollbar=false>
					<view @click="cityWide">同城配送</view>
					<view >快递配送</view>
					<view @click="toDistribution(3)">门店配送</view>
						<scroll-view scroll-y="true" class="distributions" :class="isOpen ? 'item-open' : 'item-close'" show-scrollbar=false>
							<view v-for="itemInfo in distributionList">{{itemInfo.title}}</view>
						</scroll-view>
				</scroll-view>
			</view>
		</uni-popup>
		
		<uni-popup ref="reason" type="bottom">
			<view class="list">
				<view class="ps">选择退款理由</view>
					<scroll-view scroll-y="true" class="list" show-scrollbar=false>
							<view v-for="(item,index) in reasonList" :key="index" @click="changeReason(item.reason)">{{item.text}}</view>
					</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		Storage
	} from "@/static/libs/utils";
	export default {
		data() {
			return {
				doneList:[],
				distributionList:[],
				isOver:true,
				num:'',
				btn: '',
				navIndex: 0,
				num: 2,
				totalPrice: 44.4,
				orderList: [],
				token: '',
				id: '',
				flag: false,
				navData: [{
						text: '全 部',
						status: 0

					},
					{
						text: '待接单',
						status: 1
					},
					{
						text: '已确认/待配送',
						status: 2
					},
					{
						text: '配送中',
						status: 4
					},
					{
						text: '已完成',
						status: 5
					},
					{
						text: '已取消',
						status: 6
					},
				],
				reason:'',
				Cancelid:'',
				reasonList:[
					{
						text:'用户信息不符',
						reason:'fakeOrder'
					},
					{
						text:'商品已经售完',
						reason:'foodSoldOut'
					},
					{
						text:'商家已经打烊',
						reason:'restaurantClosed'
					},
					{
						text:'超出配送范围',
						reason:'distanceTooFar'
					},
					{
						text:'商家现在太忙',
						reason:'restaurantTooBusy'
					},
					{
						text:'用户申请取消',
						reason:'forceRejectOrder'
					},
					{
						text:'配送出现问题',
						reason:'deliveryFault'
					},
					{
						text:'不满足起送要求',
						reason:'notSatisfiedDeliveryRequirement'
					}
				],
				cancelList:[],
				
			};
		},
		onLoad() {
			this.token = Storage.get('token');
			
		},
		onShow() {
			this.getOrderList()
			this.getCancelData()
			this.getDoneListData()
		},
		methods: {
			//同城配送
			cityWide(){
				uni.navigateTo({
					url:"/pages/cityWide/cityWide?id="+JSON.stringify(this.id)
				})
			},
			//快递配送
			express(){
				
			},
			// 取消订单的理由
			changeReason(re){
				console.log(re);
				this.reason = re
				var id = this.Cancelid
				this.$request.post(`/waimai_go/web/wmerchant.php?c=site&a=entry&ctrl=store&ac=order&op=takeout&ta=cancel&do=web&m=we7_wmall&id=${id}`,
				{
					token: this.token,
					isajax: 1,
					reason:this.reason
				})
				.then(res=>{
					console.log('取消订单的理由',res);
					if(res.data.message.errno == 0){
						uni.showToast({
								title: res.data.message.message,
								icon: 'success',	//如果要纯文本，不要icon，将值设为'none'
								duration: 1500
							})
						}else{
							uni.showToast({
								title: res.data.message.message,
								icon: 'none',		//如果要纯文本，不要icon，将值设为'none'
								duration: 2000		//持续时间为 2秒
							}) 
						}
					this.$refs.reason.close();
				})
			},
			// 接单
			open(item) {
				this.id = item.id
				var deliveryer_id= item.deliveryer_id
				// console.log(329,this.id,item.status,deliveryer_id);
				
				if (item.status == 1) {
					// 接受订单
					this.$request.post(
							`/waimai_go/web/wmerchant.php?c=site&a=entry&ctrl=store&ac=order&op=takeout&ta=status&do=web&m=we7_wmall&type=handle&id=${this.id}`, {
								token: this.token,
								isajax: 1
							})
						.then(res => {
							console.log('接受订单', res);
							if(res.data.message.errno == 0){
								uni.showToast({
										title: "接单成功",
										icon: 'success',    //如果要纯文本，不要icon，将值设为'none'
										duration: 1500
									})
									
									
								}else{
									uni.showToast({
										title: '接单失败',
										icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
										duration: 2000    //持续时间为 2秒
									}) 
								}
						})
				}
				
				if (item.status == 2) {
					// console.log(172);
					this.$refs.popup.open()
				}
				if (item.status == 4) {
					// 确认取货
					this.$request.post(`/waimai_go/app/index.php?i=1&c=entry&ctrl=delivery&ac=order&op=takeout&ta=takegoods&do=mobile&m=we7_wmall&id=${this.id}&ver_id=${deliveryer_id}&token=${this.token}&isajax=1`)
					.then(res=>{
						console.log(366,res);
						if(res.data.message.errno == 0){
							uni.showToast({
								title:'操作成功',
								icon:'none',
								duration:1500
							})
								this.isOver = false
							}else{
								uni.showToast({
									title: '操作失败',
									icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
									duration: 2000    //持续时间为 2秒
								}) 
							}
					})
				}
			},
			close() {
				this.$refs.popup.close();
			},
			checkIndex(index) {
				// console.log(index);
				this.navIndex = index;
			},
			// 获取订单列表
			getOrderList() {
				this.$request.get(
						`/waimai_go/web/wmerchant.php?c=site&a=entry&ctrl=store&ac=order&op=takeout&do=web&m=we7_wmall&i=1&status=0&is_reserve=-1&is_pay=-1&pay_type=&order_channel=&is_remind=&keyword=&uid=&page=&token=${this.token}&isajax=1`
					)
					.then(res => {
						console.log('获取订单列表',res);
						this.orderList = res.data.data
					})
			},
			// 配送
			toDistribution(i){
				uni.navigateTo({
					url:"/pages/dispatcher/dispatcher?id="+JSON.stringify(this.id)
				})
				
				this.$refs.popup.close()
				
			},
			// 取消订单
			toCancel(id){
				console.log(id);
				this.Cancelid=id
				var that=this
				uni.showModal({
				    title: '取消订单',
				    content: '是否确认取消订单',
				    success: function (res) {
				        if (res.confirm) {
							that.$refs.reason.open()
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			// 获取取消订单数据
			getCancelData(){
				this.$request.post(`/waimai_go/web/wmerchant.php?c=site&a=entry&ctrl=store&ac=order&op=takeout&do=web&m=we7_wmall&i=1&status=6&filter_type=cancel
				&is_reserve=-1&is_pay=-1&pay_type=&order_channel=&is_remind=&keyword=&uid=&page=&token=${this.token}&isajax=1`)
				.then(res=>{
					console.log('取消订单数据',res);
					this.cancelList = res.data.data
				})
			}
			// 获取完成订单数据
			,getDoneListData(){
				this.$request.post(`/waimai_go/web/wmerchant.php?c=site&a=entry&ctrl=store&ac=order&op=takeout&do=web&m=we7_wmall&i=1&status=5&filter_type=cancel
				&is_reserve=-1&is_pay=-1&pay_type=&order_channel=&is_remind=&keyword=&uid=&page=&token=${this.token}&isajax=1`)
				.then(res=>{
					console.log('获取完成订单数据',res);
					this.doneList = res.data.data
				})
			}
			// 确认送单
			,confirmBtn(item){
				console.log(item);
				var id = item.id
				var deliveryer_id= item.deliveryer_id
				// console.log(457,id,deliveryer_id);
				this.$request.post(`/waimai_go/app/index.php?i=1&c=entry&ctrl=delivery&ac=order&op=takeout&ta=success&do=mobile&m=we7_wmall&id=${id}&ver_id=${deliveryer_id}&token=${this.token}&isajax=1`)
				.then(res=>{
					console.log('确认送单',res);
					// this.doneList = res.data.data
					if(res.data.message.errno == 0){
						uni.showToast({
								title: res.data.message.message,
								icon: 'success',    //如果要纯文本，不要icon，将值设为'none'
								duration: 1500
							})
							
							
						}else{
							uni.showToast({
								title: res.data.message.message,
								icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
								duration: 2000    //持续时间为 2秒
							}) 
						}
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		background: rgb(245, 245, 245);
	}

	.item-open {
		height: 520rpx;
		transition: all 0.4s cubic-bezier(0.25, 1.0, 0.25, 1.0);
	}
	.item-close {
		opacity: 0;
		height: 0;
	}

	.list {
		width: 100%;
		height: 520rpx;
		background-color: #fff;
	}
	
	.distributions{
		width: 100%;
		height: 400rpx;
	}

	.ps {
		font-size: 30rpx;
		color: #666666;
		padding: 20rpx 0 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.list view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #1A1A1A;
		font-size: 30rpx;
		line-height: 110rpx;
		border-top: 1rpx solid #E5E5E5;
	}

	.head-nav {
		// width: 430rpx;
		height: 100rpx;
		line-height: 80rpx;
		padding: 0rpx 50rpx 0rpx 50rpx;
		background: #ffffff;
		display: flex;
		// flex-direction: row;
		// justify-content: space-between;
	}
	.page_header {
	position: sticky;
	width: 100%;
	left: 0;
	right: 0;
	top: 0;
	z-index: 1;
	}
	

	.tabScroll {
		white-space: nowrap;

		.tabScroll-item {
			display: inline-block;
			// width: 150rpx;
			text-align: center;
			// padding: 30rpx;
			margin-right: 60rpx;
		}
	}

	.active {
		font-weight: bold;
		border-bottom: 6rpx solid #feb140;
	}


	.item1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 20rpx;
		font-size: 26rpx;
		color: #1a1a1a;
	}

	.item1 image {
		width: 40rpx;
		height: 40rpx;
	}

	.item2 {
		font-size: 20rpx;
		color: #666666;
		margin-left: 20rpx;
	}

	.item3 {
		margin: 20rpx;
		display: flex;
		flex-direction: row;
	}

	.item3 image {
		width: 80rpx;
		height: 80rpx;
	}

	.product-info {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
	}

	.item4 {
		display: flex;
		/* flex-direction: row; */
		margin-left: 20rpx;
		font-size: 24rpx;
	}

	.order {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx;
		padding-top: 20rpx;

		.it1 {
			margin-left: 20rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 26rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #1A1A1A;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.line {
			width: 690rpx;
			height: 1rpx;
			background-color: #E5E5E5;
			margin: 20rpx 0;
		}

		.it2 {
			font-size: 20rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #666666;
			margin-left: 20rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			line-height: 40rpx;
		}

		.it3 {
			margin-left: 20rpx;
			display: flex;
			flex-direction: row;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.product-Info {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				margin-left: 20rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				line-height: 35rpx;
			}
		}

		.it4 {
			margin-left: 458rpx;
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #1A1A1A;
			padding-bottom: 20rpx;
		}
	}
</style>
